<html>
 <head>
  <title>计算工资 - 工资结算管理</title>
 </head>
 
 <script type="text/javascript">
	var scripts = [null, "lib/assets/js/jquery.validate.js", 
	"lib/assets/js/jquery-ui.custom.js", 
	"lib/assets/js/jquery.ui.touch-punch.js", 
	"lib/assets/js/chosen.jquery.js", 
	"lib/assets/js/fuelux/fuelux.spinner.js", 
	"lib/assets/js/date-time/bootstrap-datepicker.js", 
	"lib/assets/js/date-time/bootstrap-timepicker.js", 
	"lib/assets/js/date-time/moment.js", 
	"lib/assets/js/date-time/daterangepicker.js", 
	"lib/assets/js/date-time/bootstrap-datetimepicker.js", 
	"lib/assets/js/bootstrap-colorpicker.js", 
	"lib/assets/js/jquery.knob.js", 
	"lib/assets/js/jquery.autosize.js", 
	"lib/assets/js/jquery.inputlimiter.1.3.1.js", 
	"lib/assets/js/jquery.maskedinput.js", 
	"lib/assets/js/bootstrap-tag.js", null];
	
	$('.page-content-area').ace_ajax('loadScripts', scripts,
	function() {
	    jQuery(function($) {
	        var active_class = 'active';
	        
	        $('#menu-management-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click',
	        function() {
	            console.log("first");
	            var th_checked = this.checked;
	            $(this).closest('table').find('tbody > tr').each(function() {
	                var row = this;
	                if (th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
	                else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
	            });
	        });

	        $('#menu-management-table').on('click', 'td input[type=checkbox]',
	        function() {
	            console.log("2nd");
	            var $row = $(this).closest('tr');
	            if (this.checked) $row.addClass(active_class);
	            else $row.removeClass(active_class);
	        });
	        
	        $('input[name=dateRange]').daterangepicker({
	            'applyClass': 'btn-sm btn-success',
	            'cancelClass': 'btn-sm btn-default',
	            locale: {
	                applyLabel: '选择',
	                cancelLabel: '取消'
	            }
	        }).prev().on(ace.click_event,
	        function() {
	            $(this).next().focus();
	        });
	
	    });
	
	    // angular.js
	    var app = angular.module('contentApp');
	    app.controller("reportSearchController",
	    function($scope, $http) {
	
	        $scope.updateSearchResult = function() {
	            $http.post("fake/daily-report-query-by-person/result.JSON", $scope.formElements).success(function(response) { //TODO Modify the api & post info here
	                $scope.tableRows = response;
	                console.log("Tables updated!");
	            });
	        };
	        
	        $scope.updateSelectRows = function() {
	            console.log("updateSelectRows");
	            var selectedRows = [];
	            $('#menu-management-table >tbody > tr ').each(function() {
	                if ($(this).hasClass('active')) {
	                    $(this).find('td:first-child').attr("data-model-id",
	                    function(i, origValue) {
	                        selectedRows.push(origValue);
	                        return origValue;
	                    })
	                }
	            });
	            console.log(selectedRows);
	            return selectedRows;
	        };
	        
	    })
		
	})
 </script>

 <body>
  <div class="page-header"> 
   <h1>工资结算管理<small><i class="ace-icon fa fa-angle-double-right"></i>计算工资</small> </h1> 
  </div> 
  
  <!-- /.page-header --> 
  <div class="row" data-ng-app="reportSearchApp" data-ng-controller="reportSearchController"> 
   <div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="widget-box"> 
      
       <div class="widget-header"> 
        <h4 class="widget-title"> 查询条件 </h4> 
        <span class="widget-toolbar">
			<a class="btn btn-primary btn-xs" data-ng-click="updateSearchResult()">搜索</a>
			<a class="btn btn-xs" onclick="$('#report-search-form')[0].reset()">重置</a> 
		</span>
       </div> 
       
       <div class="widget-body" style="display: block;"> 
        <div class="widget-main"> 
         <form role="search" method="get" id="report-search-form"> 
          <div class="row"> 
          </div> 
          <div class="row"> 
           <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-push-2"> 
            <label for="dateRange"> 日期范围 </label> 
            <div class="input-group"> 
             <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> 
             <input class="form-control  text-center" type="text" name="dateRange" id="dateRange" data-ng-model="formElements.dateRange" data-ng-change="updateReportSearchForm()" /> 
             <!--value="*" onfocus="if (value =='*'){value =''}" onblur="if (value ==''){value='*'}" --> 
            </div> 
            <div class="hr hr8 visible-xs-block"></div> 
           </div> 
           <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-push-2"> 
            <label for="prpSelect"> 人员（包括下属） </label> 
            <select name="prpSelect" class="form-control" id="prpSelect" data-ng-model="formElements.prpSelect" data-ng-options=" prpSelect.id as prpSelect.abbr+'-'+prpSelect.name for prpSelect in formRanges.prp" data-ng-change="updateReportSearchForm()"> <option value="*" selected=""> 所有 </option> </select> 
            <div class="hr hr8"></div> 
           </div> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    
    <div class="hr hr-double hr-dotted hr10"></div> 
    <div id="alert"></div> 
    
    <div class="row" data-ng-show="tableRows"> 
     <div class="col-xs-12"> 
      <table id="menu-management-table" class="table table-striped table-bordered table-hover"> 
       <thead> 
        <tr> 
         <th class="center"> <label class="pos-rel"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </th> 
         <th> 日期 </th> 
         <th> 总工作量 </th> 
         <th> 加班工作量 </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr data-ng-repeat="row in tableRows"> 
         <td class="center" data-model-id="{{row.id}}"> <label class="pos-rel"> <input type="checkbox" class="ace" /> <span class="lbl"></span> </label> </td> 
         <td> {{row.date}} </td> 
         <td> {{row.totalWork}} </td> 
         <td> {{row.overtimeWork}} </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    
   </div> 
  </div> 
  
 </body>
</html>